<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">

    <style>
        .name{ float: right;}
        .row{ margin: 0;}
        .shop-img{ text-align: left; padding-left: 30px;}
        .shop-img img{ margin-right: 10px;}
        .panel-body{ padding-bottom:15px; }
        #tbodyId{ font-size: 13px;}
        #myTable thead{ font-size: 14px;}
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:delete">
    <input id="p_delete"  value="1" type="hidden">
</shiro:hasPermission>
<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>所有代理商管理和新增。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row name">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <select id="proCode" class="form-control" name="province" value="">
                    <option value="">请选择省份</option>
                </select>
                <select id="cityCode" class="form-control"  name="city" value="">
                    <option value="">请选择城市</option>
                </select>
                <select id="disCode" class="form-control"  name="area" value="">
                    <option value="">请选择区/县</option>
                </select>
                <input type="text" class="form-control" id="name" size="25" placeholder="代理商姓名/手机号">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
            </div>
        </form>
    </div>
    <div class="panel-heading row">
        <shiro:hasPermission name="sys:product:add">
            <button type="button" class="btn btn-primary" onclick="addMeal();"><span class="fa fa-plus"></span> 新增产品</button>
        </shiro:hasPermission>
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/product/info/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-type="xuhao">序号</th>
                    <th  data-field="memberId">代理商ID</th>
                    <th  data-field="qrcode" data-call="true">二维码</th>
                    <th  data-field="memberName">会员昵称</th>
                    <th  data-field="phone">代理商手机</th>
                    <th  data-field="name">姓名</th>
                    <th  data-field="id" data-call="true">代理商编号</th>
                    <th  data-field="address" data-call="true">所在地</th>
                    <th  data-field="expenseHistory" data-call="true">所属上级</th>
                    <th  data-field="accountInfo" data-call="true">所属体系</th>
                    <th  data-field="createTime" data-call="true">成为代理商时间</th>
                    <th  data-field="subsidiesInfo" data-call="true">状态</th>
                    <th  data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">

                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span> <select
                        id="pageSize" onchange="search(1)" class="form-control"
                        style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript"
        src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
<script type="text/javascript">
    $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>' +
            '<script src="${basePath}/bootstrap/js/bootstrapValidator-zh_CN.js"><\/script>');
</script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id == 'button') {//增加操作按钮
            var count = 0;
            var _button = '<button type="button" class="btn btn-white btn-xs" onclick="viewLower(' + data.id + ');">查看下级 </button> ';
            if ($('#p_update').val() == 1) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="viewMeal(' + data.id + ');">查看 </button> ';
            }
            return _button;
        }
        else if(id == 'qrcode'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="createQrcode(' + data.memberId + ');">生成二维码 </button> '
        }
        else {
            if(data[id] == null || data[id] == ''){
                return '';
            }else{
                return data[id];
            }
        }
    }

    //省
    function initProvince(proval){
        $.ajax({
            type:"get",
            url:'${basePath}/trip/area/proList',
            dataType:'json',
            success:function (data){
                var prohtml="<option value=''>请选择省份</option>";
                data = data.result;
                for (var i=0;i<data.length;i++) {
                    if (proval==data[i].proCode) {
                        prohtml=prohtml+("<option selected='selected' value="+data[i].proCode+">"+data[i].proName+"<\/option>");
                    }else{
                        prohtml=prohtml+("<option  value="+data[i].proCode+">"+data[i].proName+"<\/option>");
                    }
                }
                $("#proCode").html(prohtml);
                $("#cityCode").html("<option value=''>请选择城市</option>");
                $("#disCode").html("<option value=''>请选择区/县</option>");
            }
        }).done(function(){
            if(proval != ""){
                changeProvince(proval);
            }
            $("#proCode").change(function(){
                var id = $(this).val();
                changeProvince(id);
            });
        });
    }

    //市
    function changeProvince(id){
        $('#cityCode').val(id);
        var cityVal = "";
        $.ajax({
            type:"get",
            url:'${basePath}/trip/area/cityList/'+id,
            dataType:'json',
            success:function (data){
                var cityhtml="<option value=''>请选择城市</option>";
                data = data.result;
                for (var i=0;i<data.length;i++) {
                    if (cityVal==data[i].cityCode) {
                        cityhtml=cityhtml+("<option selected='selected' value="+data[i].cityCode+">"+data[i].cityName+"<\/option>");
                    }else{
                        cityhtml=cityhtml+("<option  value="+data[i].cityCode+">"+data[i].cityName+"<\/option>");
                    }
                }
                $("#cityCode").html(cityhtml);
                $("#disCode").html("<option value=''>请选择区/县</option>");
            }
        }).done(function(){
            if(cityVal != ""){
                var id = $("#cityCode").val();
                changeCity(id);
            }
            $("#cityCode").change(function(){
                var id = $(this).val();
                changeCity(id);
            });
        });
    }

    //区/县
    function changeCity(id){
        $('#cityCode').val(id);
        $.ajax({
            type:"get",
            url:'${basePath}/trip/area/disList/'+id,
            data:{id:id},
            dataType:'json',
            success:function (data){
                var areaVal = "";
                var areahtml="<option value=''>请选择区/县</option>";
                data = data.result;
                for (var i=0;i<data.length;i++) {
                    if(areaVal==data[i].disCode){
                        areahtml=areahtml+("<option selected='selected' value="+data[i].disCode+">"+data[i].disName+"<\/option>");
                    }else{
                        areahtml=areahtml+("<option value="+data[i].disCode+">"+data[i].disName+"<\/option>");
                    }
                }
                $("#disCode").html(areahtml);
            }
        });
    }


    $(function(){
        //省市县
        var proval = "";
        initProvince(proval);
    })

    /*生成二维码*/
    function createQrcode(id) {
        var date = new Date();
        var month = date.getMonth();
        var day = date.getDate();
        if (month < 9){
            month = "0" + (month + 1);
        }
        if (day < 10){
            day = "0" + day;
        }
        var dateStr = date.getFullYear().toString() + month.toString() + day.toString();
        var str = "https://lzyapp.ssl.lzyhll.com/share/pages/stone-forest/index.html?version=" +dateStr+ "&saleMan="+id;
        $('#qrcodeBox').html('');
        $('#qrcodeBox').qrcode(str);
        layer.open({
            type: 1,
            area: ['400px', '400px'],
            title:['&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二维码','text-align:center;'],
            content: $('#qrcodeBox')
        })

    }

    //查看下级
    function viewLower(id){
        window.location.href='${basePath}/admin/product/info/view/'+id;
    }

    //详情
    function viewMeal(id){
        window.location.href='${basePath}/admin/product/info/view/'+id;
    }

</script>
</body>
</html>